<script setup>
import{ref} from "vue"
const msg = ref("今天天气真不错")

// obj.value.name
const obj= ref({
    name:"孙悟空",
    age:18
})

// obj2.name.value
const obj2 = {
  name:ref("孙悟空"),
  age:ref(18)
}

const changeMsg = ()=> {
  // 修改ref对象，必须通过value
  msg.value = "但是我心情不好"
}
</script>
<template>
  <!-- ref对象在模板中可以自动解包（要求ref对象必须是顶层对象） -->
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">点我一下</button>
    <h2>{{ obj.name }}</h2>
    <!-- name不是顶层响应式对象，所以不能自动解包 -->
    <h2>{{ obj2.name.value }}</h2>
</template>